<template>
<div>
  <div class="songVer">
    <div class="pic"><img :src="list.billboard.pic_s444" alt=""></div>
    <ul>
      <li v-for="(item,index) in list.song_list" :key="index">
        <router-link :to="{path:'musicPlay',query:{songid:item.song_id}}">
          <nav>{{item.title}}</nav>
          <span>{{item.author}}</span>
        </router-link>
      </li>
    </ul>
  </div>
</div>
</template>

<script>
import {getSongList} from "@/api/api";

export default {
name: "songVerbose",
  data(){
    return{
      list:{song_list:[],billboard:""}
    }
  },
  created() {
    getSongList(this.$route.query.type,10,0).then(res=>{
      console.log(res)
      this.list = res
    })
  }
}
</script>

<style scoped lang="less">
.songVer{
  .pic{
    width: 100%;
    height: 30%;
    img{
      width: 100%;
      height: 100%;
    }
  }
  ul{
    height: 70%;
    overflow: scroll;
    li{
      padding: 4px 10px;
      border-bottom: 1px solid #eee;
      nav{
        font-size: 16px;
      }
      span{
        font-size: 12px;
        color: #ccc;
      }
    }
  }
}
</style>